<template>
    <div class="father">        
        <p>{{msg_f}}</p>
        <p>数据：{{f_data}}</p>
        <br>
        <p>来自子组件的数据：{{msg_sD2}}</p>
        <button @click="getSonData">获取子组件的数据</button>
        <button @click="getSonFn">获取子组件的方法</button>         
        <div class="father-son">
            {{msg_s}}
            <v-son :f_data='f_data' :s_fFn='f_sFn' ref="son"></v-son>
        </div>
    </div>
</template>

<script>
import Son from './son.vue';

export default {
    data () {
        return {
            msg_f: '父组件区域',
            msg_s: '子组件区域',
            msg_s2: '子组件2区域',
            f_data: '父组件数据',
            msg_sD2: '等待接收子组件数据。。。'
        }
    },
    components: {
        "v-son": Son
    },
    methods: {
        f_sFn() {
            alert('我是父组件的方法');
        },
        getSonData() {
            this.msg_sD2 = this.$refs.son.s_data;
        },
        getSonFn() {
          this.$refs.son.sonFn();
        }
    }
}
</script>

<style lang='scss'>
div.father{
    padding: 10px 30px;
    background-color: aquamarine;   
}
div.father-son{
    margin: 10px 0;
    padding: 10px;
    color: #fff;
    background-color: forestgreen;
}
div.father-son2{
    margin: 10px 0;
    padding: 10px;
    color: #fff;
    background-color: rgb(233, 195, 27);
}
</style>
